<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>

<link rel="stylesheet" href="/static/plug_in/bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
    .account {
        width: 400px;
        margin: 0 auto;
    }
</style>
<script type="text/javascript" src="/static/js/jquery3.4.1.js"></script>
<body>

<div class="account">
    <h1>注册</h1>


    <form action="" method="post">
        {% csrf_token %}
        {% for field in form_obj %}
            {% if field.name == 'code' %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                    <div class="clearfix">
                        <div class="col-md-8" style="padding-left: 0;">{{ field }}</div>
                        <div class="col-md-4"><input type="button" class="btn btn-default" id="get_code"
                                                     value="点击获取验证码"></div>
                    </div>

                </div>
            {% else %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                </div>
            {% endif %}
        {% endfor %}
        <span>{{ form_obj.errors }}</span>
        <button class="col-lg-12 btn btn-info">注册</button>
    </form>
</div>

</body>
<script>

    let timer;

    function Countdown(obj) {
        if (timer >= 1) {
            obj.attr("disabled", true).val("重新发送(" + timer + ")");
            timer--;
            setTimeout(function () {
                Countdown(obj);
            }, 1000);
        } else {
            obj.attr("disabled", false).val("重新发送");
        }
    }

    $("#get_code").on("click", function () {
        let phone = $("#id_mobile_phone").val();
        if (phone.length === 11) {
            // 向后端发送请求
            $.ajax({
                type: 'POST',
                url: "/sms/?tpl=reg",
                data: {
                    'phone': phone
                },
                success: function (data) {

                },
                error: function () {
                    $.alert("发送失败")
                }
            });
            // 重新发送倒计时
            timer = 60;
            Countdown(obj = $("#get_code"));
        }
    });


    {#$("#get_code").click(function () {#}
    {#    let phone = $('#id_mobile_phone').val();#}
    {#    if (phone.length === 11) {#}
    {#        $.ajax({#}
    {#            type: 'POST',#}
    {#            url: "/sms/?tpl=reg",#}
    {#            data: {#}
    {#                'phone': phone#}
    {#            },#}
    {#            success: function (data) {#}
    {##}
    {#            },#}
    {#            error: function () {#}
    {#                $.alert("发送失败")#}
    {#            }#}
    {#        });#}
    {#    } else {#}
    {#        alert('抱歉，手机号错误！')#}
    {#    }});#}


</script>
</html>